<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>商品支付</title>
    <link th:href="@{/static/admin/pay/css/pay.css}" rel=stylesheet>
</head>

<body>
<div id=main-container v-cloak>
    <h1 class=mod-title>
        <span class="ico_log ico-3" th:if="${order.payType} == 'wxpay'"></span>
        <span class="ico_log ico-1" th:if="${order.payType} == 'alipay'"></span>
    </h1>
    <div class=mod-ct>
        <div class=order></div>
        <div class=amount>￥<span th:text="${order.money}"></span></div>
        <div class=qrcode-img-wrapper data-role=qrPayImgWrapper>
            <div class=qrcode-img-area data-role=qrPayImg>
                <div class=show-qr-container>
                    <div ref="show_qrcode_container" id="qrcode"
                         style="width: 310px;height: 270px;" th:if="${order.valid}"></div>
                    <img class=show_qrcode_expired width=300 height=210
                         src="/static/admin/pay/images/qrcode_timeout.png" th:if="!${order.valid}">
                    <img class=pay-icons src="/static/admin/pay/images/logo_weixin.png"
                         th:if="${order.payType} == 'wxpay'">
                    <img class=pay-icons src="/static/admin/pay/images/logo_alipay.png"
                         th:if="${order.payType} == 'alipay'">
                </div>
            </div>
        </div>
        <div class=handler-panel>
            <div class="time-item dom-interval">
                <div class=time-item>
                    <h1>"付款即时到账 未到账可联系我们"</h1>
                </div>
                <div class=time-item>
                    <h1>订单:<span th:text="${order.id}"></span></h1>
                </div>
                <strong><span id="hours">00</span>时</strong>
                <strong><span id="minutes" th:text="${minute}"></span>分</strong>
                <strong><span id="seconds">00</span>秒</strong>
            </div>
            <div class=tip th:if="${order.payType} == 'wxpay'">
                <div class=ico-scan></div>
                <div class=tip-text>
                    <p>打开微信 [扫一扫]</p>
                </div>
            </div>
            <div class=tip th:if="${order.payType} == 'alipay'">
                <div class=ico-scan></div>
                <div class=tip-text>
                    <p>打开支付宝 [扫一扫]</p>
                </div>
            </div>
            <div class=tip-text></div>
        </div>
    </div>
    <input type="hidden" id="qrUrl" th:value="${order.payUrl}">
    <input type="hidden" id="valid" th:value="${order.valid}">
</div>

<script th:src="@{/static/js/jquery-1.7.2.js}"></script>
<script th:src="@{/static/admin/jquery/jquery.qrcode.min.js}" type="text/javascript"></script>
<script>
    $(function () {
        var valid = $("#valid").val();
        if(valid == 'true'){
            resetTime(300);
        }

        $("#qrcode").qrcode({
            width: 310,
            height: 270,
            text: $("#qrUrl").val()
        });
    });
    function resetTime(time){
        var timer=null;
        var hour=00,
            minute=00,
            second=00;//时间默认值
        var hourStr=00,
            minuteStr=00,
            secondStr=00;//时间默认值
        function countDown(){
            time--;

            hour = Math.floor(time/60/60);
            minute = Math.floor(time/60%60);
            second = Math.floor(time%60);

            if(hour < 10){
                hourStr = '0' + hour;
            } else {
                hourStr = hour;
            }

            if(minute < 10){
                minuteStr = '0' + minute;
            } else {
                minuteStr = minute;
            }

            if(second < 10){
                secondStr = '0' + second;
            } else {
                secondStr = second;
            }

            $("#hours").html(hourStr);
            $("#minutes").html(minuteStr);
            $("#seconds").html(secondStr);

            if(time <= 0){
                clearInterval(timer);

                $("#qrcode").hide();
                $(".show_qrcode_expired").show();
            }
        }
        timer=setInterval(countDown,1000);
    }
</script>
</body>
